<%@page import="com.windfone.common.Constant"%>
<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ include file="head.jsp"%>
<%@ taglib uri="/WEB-INF/recommend.tld" prefix="windfone"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/lunzhuan.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/002.js"></script>
<script type="text/javascript" src="js/003.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<title>配件中心  风驰电讯  您最贴心的手机顾问</title>
<%@ include file="headkey.jsp" %>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body id="pages3">

<!--头部-->
 <%@ include file="navigate.jsp"%>
 
 
 
<!--内容-->
<div class="contentBox">
<!--左区-->
<div class="col1">
 <%@ include file="pjTypeLs.jsp"%>
 <%--
<div class="tabLeBox">
<div class="title"><h3> 配件分类 </h3>
</div>

<div class="borderBox">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="accessoriesNav" >
  <tr>
    <td><h3>蓝牙耳机</h3>
  <ul>
  <li><a href="#">诺基亚</a></li>
  <li><a href="#">索尼爱立信</a></li>
  <li><a href="#">其他品牌</a></li>
  </ul>
  </td>
  </tr>
  
  <tr>
    <td><h3>蓝牙耳机</h3>
      <ul>
        <li><a href="#">诺基亚</a></li>
        <li><a href="#">索尼爱立信</a></li>
        <li><a href="#">其他品牌</a></li>
        </ul></td>
  </tr>
  
  <tr>
    <td><h3>蓝牙耳机</h3>
      <ul>
        <li><a href="#">诺基亚</a></li>
        <li><a href="#">索尼爱立信</a></li>
        <li><a href="#">其他品牌</a></li>
      </ul>
      </td>
  </tr>
  
  
</table>
<div class="clear"></div>
</div>
</div>
--%>

<div class="clear"></div>
</div>
<div class="col2">
<div>
  <div class="banner" style="float:left">
  <div id="MainPromotionBanner">
 <div id="SlidePlayer">
            <ul class="Slides">
            <windfone:ad attriName="pics" flag="firstPagePic"></windfone:ad>
	    		<c:if test="${not empty pics }">
	    			<c:forEach var="pc" items="${pics}" varStatus="status">
              		<li style=""><a target="_blank" href="${pc.url }"><img src="<%=contextPath %>/${pc.imagepath}"/></a></li>
              		</c:forEach>
              	</c:if>
            </ul>
            <ul class="SlideTriggers">
            	<c:if test="${not empty pics }">
	    			<c:forEach var="pc" items="${pics}" varStatus="status">
	              <li class="">${status.index}</li>
	              </c:forEach>
	             </c:if>
            </ul>
          </div>
          <script type="text/javascript">$().ready(function(){TB.widget.SimpleSlide.decoration('SlidePlayer', {eventType:'mouse', effect:'scroll'});});</script>
  </div>
  </div>
  

  
  
  <div class="tabLeBox">
              <div class="title">
                <h3>导购帮助</h3>
              </div>
              <div class="borderBox">
                <ul class="helpLink">
  				 <li><a href="servicenewdetail.action?newsId=17&newsTypeId=5" target="_blank">网上购买商品流程</a></li>
                  <li><a href="servicenewdetail.action?newsId=18&newsTypeId=5" target="_blank">汇款方式及帐号查询</a></li>
                  <li><a href="servicenewdetail.action?newsId=19&newsTypeId=5" target="_blank">分期付款购买方式说明</a></li>
                  <li><a href="servicenewdetail.action?newsId=20&newsTypeId=5" target="_blank">售后保修条例及投诉方式</a></li>
                </ul>
                <div class="clear"></div>
              </div>
            </div>
  
  
  
  
  
  
  <div class="clear"></div>
</div>
  <div class="tabLeBoxB" style=" padding-top:0">
    <div class="title">
      <h3>新款配件</h3>
    </div>
    <div class="borderBox">
      <div>
        <ul class="imageList">
         	<windfone:commend attriName="firstFitts" commendType="<%=com.windfone.common.Constant.PEIJIAN_PAGE_FITTING%>"></windfone:commend>        
				<c:if test="${not empty firstFitts }">
				<c:forEach var="bean" items="${firstFitts}" varStatus="status">
		          <li> <a href="pjDetail.action?peijianId=${bean.id }" target="_blank"><img src="<%=contextPath %>/${bean.imagepath}" style="width: 70px; height: 90px;" /></a>
		            <p> <a href="pjDetail.action?peijianId=${bean.id }" target="_blank">${bean.typeName }</a> </p>
		            <p> <em style="cursor: pointer;">￥${bean.price }</em> </p>
		          </li>
          		</c:forEach>
          		</c:if>
      </div>
    </div>
</div>
  <div class="tabLeBoxB" style=" padding-top:0">
    <div class="title">
      <h3>热销配件</h3>
    </div>
    <div class="borderBox">
      <div>
        <ul class="imageList">
      	<windfone:commend attriName="firstFitts" commendType="<%=com.windfone.common.Constant.PEIJIAN_PAGE_HOT_FITTING%>"></windfone:commend>
				<c:if test="${not empty firstFitts }">
				<c:forEach var="bean" items="${firstFitts}" varStatus="status">
		          <li> <a href="pjDetail.action?peijianId=${bean.id }" target="_blank"><img src="<%=contextPath %>/${bean.imagepath}" style="width: 70px; height: 90px;" /></a>
		            <p> <a href="pjDetail.action?peijianId=${bean.id }" target="_blank">${bean.typeName }</a> </p>
		            <p> <em style="cursor: pointer;">￥${bean.price }</em> </p>
		          </li>
          		</c:forEach>
          </c:if>   
        </ul>
      </div>
    </div>
  </div>
</div>
 
<div class="clear"></div>
</div>
<div class="clear"></div>
 <%@ include file="bottom.jsp" %>
</body>

<script>
	var curr = 0, next = 0, count = 0;
	$(document).ready(function() {
		// 记录图片的数量
		count = $('.flash_txt a').size();
		t = setInterval('imgPlay()', 3000);

		// 鼠标移动到图片或导航上停止播放，移开后恢复播放
		$('.flash_img, .flash_txt a').hover(function() {
			clearInterval(t);
		}, function() {
			t = setInterval('imgPlay()', 3000);
		});

		//点击导航播放到相应的图片
		$('.flash_txt a').mouseover(function() {
			// index()函数返回当前导航的下标
			var index = $('.flash_txt a').index(this);
			if (curr != index) {
				play(index);
				curr = index;
			}
			;
			return false;
		});
	});

	// 播放图片的函数
	var imgPlay = function() {
		next = curr + 1;
		// 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
		if (curr == count - 1)
			next = 0;
		play(next);

		curr++;
		// 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
		if (curr > count - 1) {
			curr = 0;
			next = curr + 1;
		}
	};

	// 控制播放效果的函数
	var play = function(next) {
		// 当前的图片滑到左边-500px，完成后返回到右边490px
		// 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
		$('.flash_img li').eq(curr).css( {
			'opacity' : '0.5'
		}).animate( {
			'left' : '0px',
			'opacity' : '1'
		}, '', function() {
			$(this).css( {
				'left' : '156px'
			});
		}).end().eq(next).animate(
				{
					'left' : '0px',
					'opacity' : '1'
				},
				'',
				function() {
					$('.flash_txt a').siblings('a').removeClass('active').end()
							.eq(next).addClass('active');
				});
	};
</script>
</html>
